<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box1 {
        width: 400px;
        height: 100px;
        margin: auto;
        border-bottom: 1px solid #ccc;
    }

    * {
        text-align: center;
        font-size: 14px;
    }

    span {
        margin-top: 25px;
    }
</style>

<body>
    <div id="box">

    </div>
    标题：<input type="text" id="title"><br>
    <br>
    内容：<textarea name="" id="content" cols="30" rows="10"></textarea>
    <button id="bu1">点击</button>
</body>
<script>
    window.onload = function () {
        document.getElementById("bu1").addEventListener("click", function () {
            var title = document.getElementById("title").value
            var conrnt = document.getElementById("content").value

            var obj =
                'title=' + title + '&con=' + conrnt
            ajax('http://192.168.1.121/api/lysend.php', "POST", obj, function () {
                if (http.readyState == 4 && http.status == 200) {
                    var re = JSON.parse(http.responseText)
                    if (re.code == 200) {
                        getlist()
                    }
                }
            })


        })
        getlist()
    }

    function ajax(url, method = "GET", params = null, func) {
        http = new XMLHttpRequest()
        //true 异步 同时执行多个请求   false 同步 按顺序执行请求
        http.open('POST', url, true)
        http.onreadystatechange = func
        if (method == 'POST') {
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        http.send(params)
    }


    function getlist() {
        ajax('http://192.168.1.121/api/lylist.php', "GET", "", function () {
            if (http.readyState == 4 && http.status == 200) {
                var res = JSON.parse(http.responseText)
                console.log(res)
                if (res.code == 200) {
                    console.log(res);
                    var str = ""
                    for (let i in res.data) {
                        str += `
    <div id="box1">
        <h3>${res.data[i].title}</h3>
        <p>${res.data[i].con}</p>
        <span>${res.data[i].send_time}<a onclick="dellist(${res.data[i].id})">删除</a></span>

    </div>
    `
                    }
                    console.log(str)
                    document.getElementById("box").innerHTML = str
                } else {
                    document.getElementById("box").innerHTML = "暂时没有数据"
                }
            }
        })

    }
    function dellist(id) {
        ajax('http://192.168.1.121/api/lybdel.php?id=' + id, 'GET', "", function () {
            if (http.readyState == 4 && http.status == 200) {
                var sz = JSON.parse(http.responseText)
                if (sz.code == 200) {
                    getlist()
                }
            }
        })
    }
</script>

</html>